import React,{useEffect}  from "react";
import {
    View,
    StyleSheet,
    Text,
    FlatList,
    Dimensions,
    Image,
    ScrollView,
    TouchableOpacity
}from 'react-native';
import {useLocalStore,observer} from 'mobx-react';
import HomeStore from "./HomeStore";
import ResizeImage from "../../components/ResizeImage";
const {width:SCREEN_WIDTH}=Dimensions.get("window");

import Heart from "../../components/Heart";
import TitleBar from "./components/TitleBar";
import Header from "./components/CategoryList";


export default observer(()=> {
    const store = useLocalStore(()=>new HomeStore());

    useEffect(()=>{
        store.requestHomeList();
        store.getCategoryList();
    },[]);
    const refreshNewData = ()=>{
        store.resetPage();
        store.requestHomeList();
    }
    const  renderItem = ({item, index}:{item:ArticleSimple, index:number})=>{
        return (
        <View style={styles.flatitem}>
            <ResizeImage  uri={item.image}/>
            <Text style={styles.itemtitle}>{item.title}</Text>
            <View style={styles.itemavacontainer}>
                <Image style={styles.itemavatarImg} source={{uri:item.avatarUrl}}/>
                <Text style={styles.itemavatarUser}>{item.userName}</Text>
                <Heart value={item.isFavorite} size={20}/>
                <Text style={styles.heartTxt}>{item.favoriteCount}</Text>
            </View>
               
        </View>);
    }
    const Footer = ()=>{
        return (
            <Text style={styles.footerTxt}>没有更多数据啦</Text>
        )
    }
     const categoryList = store.categoryList.filter((item)=>item.isAdd);

    return (
        <View style={styles.root}>
            <TitleBar tabIndex={1}/>
            {/* <Header /> */}
            <FlatList 
               style={styles.flatlist}
               data={store.homeList}
               renderItem={renderItem}
               contentContainerStyle={styles.container}
               numColumns={2}
               refreshing={store.refreshing}
               onRefresh={refreshNewData}
               onEndReachedThreshold={0.2}
               onEndReached={()=>{
                    store.requestHomeList();
               }}
               ListFooterComponent={<Footer />}
               ListHeaderComponent={<Header categoryList={categoryList} allcategoryList={store.categoryList} />}
                />
        </View>
    );
})
const  styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: "#f0f0f0"
    },
    flatlist:{
        width:'100%',
        height: '100%'
    },
    flatitem:{
        width: SCREEN_WIDTH - 18 >>1,
        backgroundColor: 'white',
        marginLeft: 6,
        marginBottom: 6,
        borderRadius: 8,
        overflow: 'hidden'
    },
    container:{
        // paddingTop: 6
    },
    itemimage:{
        width: '100%',
        height: 250,
        resizeMode:'cover'
    },
    itemtitle:{
        fontSize: 20,
        color: '#333',
        marginHorizontal: 10,
        marginVertical: 4 
    },
    itemavacontainer:{
        width:'100%',
        flexDirection: 'row',
        alignItems: 'center',
        //justifyContent: 'center'
        paddingHorizontal: 10,
        marginBottom: 12

    },
    itemavatarImg:{
        width: 18,
        height: 18,
        resizeMode: 'cover',
        borderRadius: 9
    },
    itemavatarUser:{
        flex: 1,
        fontSize: 12,
        color: '#999',
        marginLeft: 4

    },
    itemheart: {
        width: 20,
        height: 20,
        resizeMode: 'contain'
    },
    heartTxt:{
        fontSize: 14,
        color: '#999',
        marginLeft: 4
    },
    footerTxt:{
        fontSize: 14,
        color: '#333',
        width: '100%',
        textAlign: 'center',
        textAlignVertical: 'center',
        marginVertical: 12
    }

});